<template>
  <div class="bg-slate-50 border-l border-slate-200 flex flex-col overflow-hidden" style="width: 40%; min-width: 0;">
    <!-- 标题栏 -->
    <div class="bg-white border-b border-slate-200 p-6">
      <div class="flex items-center justify-between">
        <div>
          <h2 class="font-bold text-slate-800 text-lg">回答详情</h2>
          <p class="text-sm text-slate-500">展示模型处理过程和输出结果</p>
        </div>
        <div class="flex items-center space-x-2">
          <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
        </div>
      </div>
    </div>

    <!-- 结果内容 -->
    <div class="flex-1 overflow-y-auto custom-scrollbar p-6 space-y-4" id="resultArea">
      <div v-if="resultPanels.length === 0" class="flex items-center justify-center h-full">
        <div class="text-center">
          <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mx-auto mb-4 opacity-50">
            <i class="fas fa-chart-line text-white text-2xl"></i>
          </div>
          <h3 class="text-lg font-semibold text-slate-800 mb-2">等待处理结果</h3>
          <p class="text-slate-600">开始对话后，处理结果将在这里显示</p>
        </div>
      </div>

      <div 
        v-for="panel in resultPanels" 
        :key="panel.id"
        class="result-panel bg-white rounded-xl shadow-sm border border-slate-200 p-6 transition-all duration-300"
        :class="{ 'ring-2 ring-indigo-500 bg-indigo-50': panel.active }"
        :data-result="panel.id"
        :style="{ display: panel.visible ? 'block' : 'none' }"
        @click="$emit('panel-click', panel)"
      >
        <div class="flex items-center justify-between mb-4">
          <h3 class="font-semibold text-slate-800 flex items-center">
            <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3" :class="panel.iconBg">
              <i :class="panel.icon" class="text-white"></i>
            </div>
            {{ panel.title }}
          </h3>
          <div class="flex items-center space-x-2">
            <span class="px-2 py-1 text-xs rounded-full" :class="panel.stepBadge">{{ panel.step }}</span>
            <span class="text-xs text-slate-400">{{ formatTime(panel.timestamp) }}</span>
            <span v-if="panel.extraInfo" class="text-xs ml-2" :class="panel.extraInfoClass">{{ panel.extraInfo }}</span>
          </div>
        </div>
        
        <div class="space-y-3 content-wrap" v-html="panel.content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { formatTime } from '../../utils/home'
import type { ResultPanel } from '../../types/home'

interface Props {
  resultPanels: ResultPanel[]
}

interface Emits {
  (e: 'panel-click', panel: ResultPanel): void
}

defineProps<Props>()
defineEmits<Emits>()
</script>

<style scoped>
/* 结果面板动画 */
.result-panel {
  animation: panelSlideIn 0.4s ease-out;
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 活跃面板样式 */
.result-panel.ring-2 {
  animation: panelPulse 0.6s ease-in-out;
}

@keyframes panelPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
  }
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  display: block;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
  display: block;
}

/* 内容换行 */
.content-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* 防止表格和代码块横向溢出 */
.content-wrap table {
  overflow-x: auto;
  max-width: 100%;
  display: block;
  white-space: normal;
}

.content-wrap pre {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.content-wrap code {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>